<template>
	<view class="aylanma">
		<swiper circular autoplay interval='2300' duration="8500" class="swiper-box" display-multiple-items='3'
			style="height:105px;">
			<block v-for="(item, index) in list" :key="index">
				<swiper-item class="swiper-item">
					<view class="item" @click="handleView(item)">
						<view class="image">
							<image class="img" :src="item.cat_image" mode="aspectFill"></image>
						</view>
						<view class="text">{{item.title}}</view>
					</view>
				</swiper-item>
			</block>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				require: true,
			}
		},
		data() {
			return {

			}
		},
		methods: {
			handleView(item) {
				// console.log(item);
				uni.navigateTo({
					url: `/pages/view/index?id=${item.id}`
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.aylanma {
		padding-top: 20px;
		background-color: #fff;

		.swiper-box {
			.item {
				padding: 0 5px;
				overflow: hidden;
				position: relative;

				.image {
					width: 100%;
					height: 105px;
					border-radius: 0 0 5px 5px;
					overflow: hidden;

					.img {
						display: block;
						width: 100%;
						height: 100%;
					}
				}

				.text {
					white-space: nowrap;
					padding: 0 5px;
					position: absolute;
					bottom: 0;
					left: 5px;
					right: 5px;
					background-image: linear-gradient(45deg, #ff0ba1, #ffc400);
					border-radius: 0 0 5px 5px;
					overflow: hidden;
					text-align: center;
					color: #fff;
					font-size: 12px;
					height: 24px;
					line-height: 24px;
				}
			}
		}
	}
</style>